<script setup>
import DefaultAvatar from "@/assets/img/AvatarIoc/default-avatar.jpg"

const Props = defineProps({
  book: {
    type: Object,
    default: {
      imageSrc: "default-avatar",
      title: "书名",
      intro: "简介",
      category: "类别",
      author: "作者",
      publisher: "出版社",
      score: "评分"
    }
  }
});
</script>

<template>
  <!--书籍-->
  <div class="wrap">
    <div class="box-top">
      <el-image class="image"
                :src="Props.book.imageSrc === 'default-avatar'?DefaultAvatar:Props.book.imageSrc"></el-image>
    </div>
    <div class="box-bottom">
      <!--书名 -->
      <h2>{{ Props.book.title }}</h2>
      <!--简介-->
      <span>{{ Props.book.intro }}</span>
    </div>
    <div class="box-bottom2">
      <ul>
        <!--类别-->
        <li>类别:{{ Props.book.category }}</li>
        <!--作者-->
        <li>作者:{{ Props.book.author }}</li>
        <!--出版社-->
        <li>出版社:{{ Props.book.publisher }}</li>
        <!--评分-->
        <li>评分:{{ Props.book.score }}</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
/* -------------------------------------------- */
/* 外层容器 */
/* -------------------------------------------- */
.wrap {
  position: relative;
  width: 330px;
  height: 260px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 10px rgb(0, 0, 0, .5);
  overflow: hidden;
  border-radius: 10px 30px;
}

/* -------------------------------------------- */
/* 上部分的块 */
/* -------------------------------------------- */
.box-top {

  position: relative;
  width: 330px;
  height: 130px;
  background-color: rgb(155, 237, 244);
  display: flex;
  justify-content: center;
  transition: .5s;
}

.box-top::after {
  content: '';
  width: 40px;
  height: 40px;


  clip-path: polygon(50% 40%, 0 0, 100% 0);
  background-color: rgb(153, 222, 255);
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: -38px;
  z-index: 999;
}

.image {
  position: absolute;
  top: 20px;
  width: 90px;
  height: 90px;
  /*background-image: url("Goat.gif");*/

  background-size: cover;
  border: 5px solid rgb(236, 243, 238);
  transition: .5s;
}

/* -------------------------------------------- */
/* 下部分的两个大块 */
/* -------------------------------------------- */
.box-bottom, .box-bottom2 {
  position: absolute;
  top: 130px;
  width: 330px;
  height: 130px;
  text-align: center;
  transition: .5s;
}

.box-bottom h2 {
  display: block;
  margin: 30px 0 10px 0;
  font: 800 28px 'Hobo Std';
}

.box-bottom span {
  font: 400 20px 'Giddyup Std';
}

.box-bottom h2::after {
  content: '';
  display: block;
  width: 200px;
  height: 2px;
  background-color: #000;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 4px);
}

/* -------------------------------------------- */
/* 下部分的第二个大块 */
/* -------------------------------------------- */
.box-bottom2 {
  top: 300px;
  height: 220px;
}

.box-bottom2 li {
  list-style: none;
  margin: 25px;
  font: 800 18px "Giddyup Std";
  transition: .2s;
}

/* -------------------------------------------- */
/* 鼠标移入的效果 */
/* -------------------------------------------- */
.wrap:hover .box-top {
  height: 50px;
}

.wrap:hover .image {
  width: 35px;
  height: 35px;
  border-width: 3px;
  transform: translate(-140px, -15px);
}

.wrap:hover .box-bottom {
  top: 300px;
}

.wrap:hover .box-bottom2 {
  top: 50px;
}

li:hover {
  color: rgb(100, 160, 160)
}
</style>
